<script setup>
import DateRangeSelector from '@/components/DateRangeSelector.vue'
import { reactive, ref, watch } from 'vue'
import { Calender } from '@/utils/dateUtils'

const props = defineProps({
  type: {
    type: [String, Number],
    default: -1
  },
  borderness:{
    type:Boolean,
    delete:true
  }
})
const emits = defineEmits(['confirm', 'update:type'])

const dateSelectShow = ref(false)
const filter = reactive({
  ranges: [
    {
      label: '今日',
      value: '1'
    },
    {
      label: '昨日',
      value: '2'
    },
    {
      label: '本周',
      value: '3'
    },
    {
      label: '本月',
      value: '4'
    }
  ],
  value: ''
})

const custom = ref(false)
const setType = function (type) {
  filter.value = type + ''
  custom.value = +type >= 5
}

const form = reactive({
  st: '',
  et: ''
})

const rangeSelect = function (index) {
  let c = new Calender()
  let selectors = [
    ['', ''],
    c.today(),
    c.yesterday(),
    c.currentWeek(),
    c.currentMonth(),
    c.currentYear(),
    c.lastWeek(),
    c.lastMonth(),
    c.lastYear()
  ]
  let [st, et] = selectors[index]
  form.st = st
  form.et = et
}

const filterOnlyClick = function (item) {
  let { value } = item
  rangeSelect(value)
  filter.value = value
  custom.value = false
  emits('confirm', form)
}

const customFilter = function () {
  dateSelectShow.value = !dateSelectShow.value
}

const dateRangeChange = function (e) {
  let { active, st, et } = e

  form.st = st
  form.et = et

  setType(active)
  emits('confirm', form)
  emits('update:type', active)
}

watch(
  () => props.type,
  (v) => {
    setType(v)
    filterOnlyClick({
      value: v
    })
  },
  {
    immediate: true
  }
)
</script>

<template>
  <div>
    <div :class="['radio-group-warp',props.borderness?'borderness':'bgcolor']">
      <radio-group class="radio-group">
        <label class="group-item" v-for="item in filter.ranges" @click="filterOnlyClick(item)">
          <radio
            :class="['group-item__input']"
            :value="item.value"
            :checked="filter.value === item.value"
          ></radio>
          <span class="group-item__label">
            {{ item.label }}
          </span>
        </label>
      </radio-group>

      <label class="group-item" @click="customFilter">
        <span :class="['group-item__label', custom ? 'active' : '']">
          筛选
          <image
            class="image-icon-mini"
            src="@/static/icons/icon-filter.png"
            style="margin-left: 5rpx"
          >
          </image>
        </span>
      </label>
    </div>

    <date-range-selector
      v-model:show="dateSelectShow"
      v-model:value="filter.value"
      @confirm="dateRangeChange"
    ></date-range-selector>
  </div>
</template>

<style scoped lang="scss">
.radio-group-warp {
  display: flex;

  &.borderness{

    .group-item{

      .group-item__label{
        display: inline-block;
        background-color: #f5f5f5;
        color: #9c9c9c;
        font-size: 14px;
        padding: 12rpx 18rpx;
        margin: 0 8rpx;

        &.active {
          color: #2badfe !important;
          border-color: #2badfe !important;
        }
      }
    }
  }

  &.bgcolor{

    .group-item {
      .group-item__label {
        display: inline-block;
        background-color: #f5f5f5;
        color: #9c9c9c;
        font-size: 14px;
        padding: 12rpx 18rpx;
        margin: 0 8rpx;

        &.active {
          color: #ffffff;
          background-color: #006cbe !important;
        }
      }
    }
  }


}
</style>
